<template>
  <div class="search-contain">
    <div class="search-header">
      <div class="search-pannel">
        <i class="i-search"></i>
        <input
          class="search-inpt"
          placeholder="金丝玉手镯"
          v-model="searchText"
        />
      </div>
      <button class="btn-search" @click="handleSearch(searchText)">搜索</button>
    </div>
    <div class="search-content">
      <div class="tags-panel" v-if="noSearch">
        <div class="tags-title">热门搜索</div>
        <div class="tags-list">
          <div
            class="tags-list__item"
            v-for="val in Math.ceil(hotTags.length / 4)"
          >
            <span
              @click="handleSearch(hotTags[4 * (val - 1)])"
              v-if="hotTags[4 * (val - 1)]"
              >{{ hotTags[4 * (val - 1)] }}</span
            >
            <span
              @click="handleSearch(hotTags[4 * (val - 1) + 1])"
              v-if="hotTags[4 * (val - 1) + 1]"
              >{{ hotTags[4 * (val - 1) + 1] }}</span
            >
            <span
              @click="handleSearch(hotTags[4 * (val - 1) + 2])"
              v-if="hotTags[4 * (val - 1) + 2]"
              >{{ hotTags[4 * (val - 1) + 2] }}</span
            >
            <span
              @click="handleSearch(hotTags[4 * (val - 1) + 3])"
              v-if="hotTags[4 * (val - 1) + 3]"
              >{{ hotTags[4 * (val - 1) + 3] }}</span
            >
          </div>
        </div>
        <div class="tags-title" v-if="historyTags.length > 0">搜索历史</div>
        <div class="tags-list" v-if="historyTags.length > 0">
          <div
            class="tags-list__item"
            v-for="val in Math.ceil(historyTags.length / 4)"
          >
            <span
              @click="handleSearch(historyTags[4 * (val - 1)])"
              v-if="historyTags[4 * (val - 1)]"
              >{{ historyTags[4 * (val - 1)] }}</span
            >
            <span
              @click="handleSearch(historyTags[4 * (val - 1) + 1])"
              v-if="historyTags[4 * (val - 1) + 1]"
              >{{ historyTags[4 * (val - 1) + 1] }}</span
            >
            <span
              @click="handleSearch(historyTags[4 * (val - 1) + 2])"
              v-if="historyTags[4 * (val - 1) + 2]"
              >{{ historyTags[4 * (val - 1) + 2] }}</span
            >
            <span
              @click="handleSearch(historyTags[4 * (val - 1) + 3])"
              v-if="historyTags[4 * (val - 1) + 3]"
              >{{ historyTags[4 * (val - 1) + 3] }}</span
            >
          </div>
        </div>
      </div>
      <div class="result-list" v-else>
        <van-list
          v-model="isUploading"
          :finished="finished"
          :finished-text="finished_text"
          @load="onLoad"
          :offset="10"
        >
          <div
            class="result-list__item"
            v-for="val in list"
            @click="handleDetail(val.id)"
          >
            <div class="left">
              <img v-lazy="imageShow(val.primary_pic_url)" />
            </div>
            <div class="right">
              <div class="title">{{ val.name }}</div>
              <div class="discount-icon">
                <img :src="sendBdcUrl" />
              </div>
              <div class="discount">
                <span
                  ><span class="money">￥</span
                  >{{
                    val.promotionalPrice
                      ? val.promotionalPrice
                      : val.retail_price
                  }}</span
                >
                <span class="discount-tag" v-if="val.promotionalPrice"
                  >{{ val.promotionalDiscount }}折价</span
                >
              </div>
              <div class="merge" v-if="val.fightGroupPrice">
                <span
                  ><span class="money">￥</span>{{ val.fightGroupPrice }}</span
                >
                <span class="merge-tag">折后拼单价</span>
              </div>
              <div class="salse">
                <div class="salse-left">
                  <span v-if="val.promotionalPrice"
                    ><del>￥{{ val.retail_price }}</del></span
                  >
                  <span v-else>
                    <del>￥{{ val.market_price }}</del>
                  </span>
                  <span class="tag">包邮</span>
                </div>
                <span>已售{{ val.sell_volume ? val.sell_volume : 0 }}件</span>
              </div>
            </div>
          </div>
        </van-list>
        <!--<div class="result-list__item">
                    <div class="left">
                        <img src="../../assets/images/2.png">
                    </div>
                    <div class="right">
                        <div class="title">和田玉圆牌牌新品️S925纯银镶嵌扣 头伴镶碧玉简约大方</div>
                        <div class="tags">
                            <span>包邮</span>
                        </div>
                        <div class="salse">
                            <span class="red">￥1024</span>
                            <span>已售999件</span>
                        </div>
                    </div>
                </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import { autoLogin } from '@/utils'  
import { searchHot, searchHistory, search } from "@/api/goods";
export default {
  name: "index",
  data() {
    return {
      noSearch: true,
      searchText: "",
      isUploading: false,
      finished: false,
      finished_text: "没有更多了",
      list: [],
      totalPages: 1,
      isFirst: true,
      query: {
        page: 1,
        limit: 10,
        name: "",
        sidx: ""
      },
      historyTags: [],
      hotTags: [],
      sendBdcUrl: "https://images.bdchats.com/prod/upload/product_discount.png"
    };
  },
  created() {
    autoLogin()
    this.searchText = sessionStorage.getItem("searchText");
    this.searchHotWord();
    this.searchHistoryLog();
  },
  methods: {
    handleReturn() {
      this.$router.go(-1);
    },
    searchHotWord() {
      const self = this;
      searchHot().then(response => {
        if (response.data) {
          for (const item of response.data) {
            if (item) {
              self.hotTags.push(item);
            }
          }
        }
      });
    },
    searchHistoryLog() {
      const self = this;
      searchHistory().then(response => {
        for (const item of response.data) {
          if (item) {
            self.historyTags.push(item);
          }
        }
      });
    },
    handleSearch(name) {
      this.noSearch = false;
      this.searchText = name;
      this.query.name = name;
      this.finished = false;
      this.isUploading = false;
      this.totalPages = 1;
      this.query.page = 1;
      this.list = [];
      this.getList();
    },
    handleDetail(id) {
      sessionStorage.setItem("isSpike", 0);
      this.$router.push("/detail/" + id);
    },
    imageShow(src) {
      const img = {};
      img.loading = require("@/assets/images/loading.gif");
      img.src = src;
      return img;
    },
    async getList() {
      await search(this.query).then(response => {
        if (this.isFirst) {
          this.isFirst = false;
          this.totalPages = response.data.pageUtil.totalPage;
        }
        if (this.list.length) {
          if (this.isUploading) {
            //上拉加载
            for (const item of response.data.pageUtil.list) {
              this.list.push(item);
            }
            this.$nextTick(() => {
              this.isUploading = false;
            });
            if (this.list.length >= response.data.pageUtil.totalCount) {
              this.finished = true;
            }
          }

          if (this.isDownLoading) {
            //关闭下拉刷新
            this.isDownLoading = false;
            this.list = [];
            for (const item of response.data.pageUtil.list) {
              this.list.push(item);
            }
            if (this.finished) {
              this.finished = false;
            }
          }
        } else {
          if (response.data.pageUtil.list) {
            const dataList = response.data.pageUtil.list;
            for (const item of dataList) {
              this.list.push(item);
            }
            if (response.data.pageUtil.totalCount === 0) {
              this.finished_text = "暂无数据";
              this.finished = true;
            }
          }
          this.isUploading = false;
          this.isDownLoading = false;
        }
        console.log(this.list);
      });
    },
    onLoad() {
      if (this.query.page < this.totalPages) {
        this.query.page = this.query.page + 1;
        this.isUploading = true;
        this.query.name = this.searchText;
        this.getList();
      } else {
        this.finished = true;
        this.isDownLoading = false;
        this.isUploading = false;
      }
    },
    onRefresh() {
      this.finished = false;
      this.isUploading = false;
      this.query.page = 1;
      this.query.name = this.searchText;
      this.getList();
    }
  }
};
</script>
